<!DOCTYPE html>
<html>
	<head>
		<title>Dynamic loading. Load Ahead</title>
		<link rel="stylesheet" href="../../../codebase/webix.css" type="text/css" charset="utf-8">
		<script src="../../../codebase/webix.js" type="text/javascript" charset="utf-8"></script>

		<link rel="stylesheet" type="text/css" href="../common/samples.css">
		<script src="../common/testdata.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class='header_comment'>Dynamic loading. Avoiding blank spots while scrolling</div>
		<div class='sample_comment'>The sample shows the use of parameter 'loadahead'. The parameter allows you to avoid DataTable from possible 'blank spots' while scrolling. How does it work? When you start scrolling, the grid detects its direction (up or down) and load next records in this direction (number of records is defined by the parameter).</div>
		<div class='sample_comment'>Dynamic loading from DB (sqllite + php).</div>
		<div id="testA" style='height:600px'></div>
		
		<script type="text/javascript" charset="utf-8">

		webix.ready(function(){
			grida = new webix.ui({
				container:"testA",
				view:"datatable",
				columns:[
					{ id:"package",	header:"Name", 			width:200 },
					{ id:"section",	header:"Section",		width:120 },
					{ id:"size",	header:"Size" , 		width:80  },
					{ id:"architecture",	header:"PC", 	width:60  }
				],
				
				datafetch:100,
				loadahead:50,
				autowidth:true,
				url:"data/data_dyn.php"
			});	
		});
		</script>
	</body>
</html>